import React, { useState } from 'react'
import style from './style.module.css'
import { Breadcrumb, Steps, Button } from 'antd';
import PinOne from '@/components/PinOne/pinone.jsx'
import PinTwo from '@/components/PinOne/pintwo.jsx'
import PinThree from '@/components/PinOne/pinthree.jsx'

import { addPinTuanData } from '@/api/request'

let { Step } = Steps;



const PinAdd = (props) => {
    //上传的图片
    let [data, setuploadUrl] = useState('');
    // 拼团名称状态
    let [valueName, setvalueName] = useState('');
    // 拼团简介状态
    let [valueIntroduction, setvalueIntroduction] = useState('');
    // 商品单位状态
    let [valueUnit, setvalueUnit] = useState('');
    // 活动日期状态
    let [valueDate, setvalueDate] = useState('');
    // 拼团实效默认值
    let [valueResults, setvalueResults] = useState('');
    // 拼团人数默认值
    let [valuePeople, setvaluePeople] = useState('');
    // 数量限制默认值
    let [valueLimit, setvalueLimit] = useState('');
    // 单选按钮默认选中状态
    let [valueDan, setvalueDan] = useState('');
    const [current, setCurrent] = React.useState(0);
    // 子传父--获取子组件PinOne传过来的图片地址
    const AddUpload = (data) => {
        setuploadUrl(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团名称
    const AddvalueName = (data) => {
        setvalueName(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团简介
    const AddvalueIntroduction = (data) => {
        setvalueIntroduction(data)
    }

    // 子传父--获取子组件PinTwo传过来的商品单位
    const AddvalueUnit = (data) => {
        setvalueUnit(data)
    }

    // 子传父--获取子组件PinTwo传过来的活动日期
    const AddvalueDate = (data) => {
        setvalueDate(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团实效
    const AddvalueResults = (data) => {
        setvalueResults(data)
    }

    // 子传父--获取子组件PinTwo传过来的拼团人数
    const AddvaluePeople = (data) => {
        setvaluePeople(data)
    }

    // 子传父--获取子组件PinTwo传过来的数量限制
    const AddvalueLimit = (data) => {
        setvalueLimit(data)
    }

    // 子传父--获取子组件PinTwo传过来的活动状态
    const AddvalueDan = (data) => {
        setvalueDan(data)
    }


    let steps = [
        {
            title: '选择拼团商品',
            content: <PinOne AddUpload={AddUpload} />,
        },
        {
            title: '填写基础信息',
            content: <PinTwo shangchuanurl={data}
                AddvalueName={AddvalueName}
                AddvalueIntroduction={AddvalueIntroduction}
                AddvalueUnit={AddvalueUnit}
                AddvalueDate={AddvalueDate}
                AddvalueResults={AddvalueResults}
                AddvaluePeople={AddvaluePeople}
                AddvalueLimit={AddvalueLimit}
                AddvalueDan={AddvalueDan} />,
        },
        {
            title: '修改商品详情',
            content: <PinThree />,
        },
    ];


    const next = () => {
        setCurrent(current + 1);
    };

    const prev = () => {
        setCurrent(current - 1);
    };

    const addPintuan = async () => {
        await addPinTuanData({ image: data, name: valueName, title: valueIntroduction, peopleNum: valuePeople, endTime: valueDate, state: valueDan })
        props.history.push('/main/marketing/groupadmin/groupgoods')
    }
    return <div className={style.pinadd_M}>
        <div className={style.pinadd_header_M}>
            <Breadcrumb separator=">">
                <Breadcrumb.Item>主页</Breadcrumb.Item>
                <Breadcrumb.Item>营销</Breadcrumb.Item>
                <Breadcrumb.Item>拼团管理</Breadcrumb.Item>
                <Breadcrumb.Item>拼团商品</Breadcrumb.Item>
            </Breadcrumb>
        </div>
        <div className={style.pinadd_main_M}>
            <div className={style.main_M}>
                <Steps current={current}>
                    {steps.map(item => (
                        <Step key={item.title} title={item.title} />
                    ))}
                </Steps>
                <div className="steps-content">{steps[current].content}</div>
                <div className="steps-action">
                    {current < steps.length - 1 && (
                        <Button type="primary" onClick={() => next()}>
                            下一步
                        </Button>
                    )}
                    {current === steps.length - 1 && (
                        <Button type="primary" onClick={addPintuan}>
                            提交
                        </Button>
                    )}
                    {current > 0 && (
                        <Button style={{ margin: '0 8px' }} onClick={() => prev()}>
                            上一步
                        </Button>
                    )}
                </div>
            </div>
        </div>
    </div>
}

export default PinAdd